<template>
  <div class="dashboard-container">
    <div class="dashboard-status">
      <div>营业状态</div>
      <div>消息盒子</div>
    </div>
    <div>
      <div class="today-data">
        <div>
          <div>今日数据</div>
          <div>查看详细数据</div>
        </div>
        <div>
          <div class="today-data-item">
            <div>
              <div>营业额</div>
              <div>元</div>
            </div>
            <div>{{ dashboardData.turnover }}</div>
          </div>
          <div class="today-data-item">
            <div>
              <div>有效订单</div>
              <div>笔</div>
            </div>
            <div>{{ dashboardData.validOrderCount }}</div>
          </div>
          <div class="today-data-item">
            <div>
              <div>订单完成率</div>
              <div>%</div>
            </div>
            <div>{{ dashboardData.orderFinishRate * 100 }}</div>
          </div>
          <div class="today-data-item">
            <div>
              <div>平均客单价</div>
              <div>元</div>
            </div>
            <div>{{ dashboardData.averagePrice }}</div>
          </div>
        </div>
      </div>
      <div class="order-dish">
        <div class="order-data">
          <div>
            <div>订单管理</div>
            <div>查看订单明细</div>
          </div>
          <div class="order-dish-item">
            <div><span>{{ dashboardData.waitOrderCount }}</span>待接单</div>
            <div><span>{{ dashboardData.waitDeliveryCount }}</span>待派送</div>
            <div><span>{{ dashboardData.finishCount }}</span>已完成</div>
            <div><span>{{ dashboardData.cancelCount }}</span>已取消</div>
            <div><span>{{ dashboardData.orderCount }}</span>全部订单</div>
          </div>
        </div>
        <div class="dish-data">
          <div>
            <div>菜品管理</div>
            <div>查看菜品明细</div>
          </div>
          <div class="order-dish-item">
            <div><span>{{ dashboardData.enableDishCount }}</span>已启售</div>
            <div><span>{{ dashboardData.disableDishCount }}</span>已停售</div>
            <div>新增菜品</div>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" round @click="queryParam.status = 1">待接单{{ dashboardData.waitOrderCount }}</el-button>
    <el-button type="success" round @click="queryParam.status = 2">待配送{{ dashboardData.waitDeliveryCount }}</el-button>
    <div class="table-class">
      <!-- 全部订单 待接单 待派送 派送中 已完成 已取消 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column fixed prop="orderNumber" label="订单号" width="200" :key="1">
        </el-table-column>
        <el-table-column prop="orderItems" :formatter="dishFormatter" label="菜品" :key="2"></el-table-column>
        <el-table-column prop="deliveryAddress" label="配送地址" :key="6">
        </el-table-column>
        <el-table-column prop="estimatedDeliveryTime" label="预计送达时间" :key="7">
        </el-table-column>
        <el-table-column prop="totalAmount" label="实收金额" :key="10">
        </el-table-column>
        <el-table-column prop="notes" label="备注" :key="11">
        </el-table-column>
        <el-table-column prop="utensilQuantity" label="餐具数量" :key="12">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" :key="15">
          <template slot-scope="scope">
            <!-- 接单 拒单 派送 完成 查看 -->
            <el-button v-if="scope.row.status == 1" type="text" size="small"
              @click="takeOrder(scope.row.id)">接单</el-button>
            <el-button v-if="scope.row.status == 1" type="text" size="small"
              @click="onCancelOrder(scope.row.id)">拒单</el-button>
            <el-button v-if="scope.row.status == 2" type="text" size="small"
              @click="readyOrder(scope.row.id)">派送</el-button>
            <el-button v-if="scope.row.status == 0 || scope.row.status == 2 || scope.row.status == 3" type="text"
              size="small" @click="onCancelOrder(scope.row.id)">取消</el-button>
            <el-button type="text" size="small" @click="viewDetail(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total" :page-size.sync="page.size"
        :pager-count="5" :current-page.sync="page.page" :page-sizes="[1, 10, 20, 50, 100, 500]"
        @current-change="pageChange" @prev-click="page.page--" @next-click="page.page++" @size-change="sizeChange"
        :hide-on-single-page="false">
      </el-pagination>
    </div>
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible" center>
      <el-descriptions :column="2">
        <el-descriptions-item label="订单号">{{ orderDetail.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderDetail.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ orderDetail.status }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ orderDetail.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ orderDetail.paymentTime }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ orderDetail.paymentMethod }}</el-descriptions-item>
        <el-descriptions-item label="预计送达时间">{{ orderDetail.estimatedDeliveryTime }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ orderDetail.recipientName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ orderDetail.recipientPhone }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ orderDetail.deliveryAddress }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ orderDetail.notes }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1">
        <el-descriptions-item label="菜品">
          <el-table :data="orderDetail.orderItems">
            <el-table-column prop="dishName"></el-table-column>
            <el-table-column prop="quantity"></el-table-column>
            <el-table-column prop="amount"></el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="打包费">{{ orderDetail.packagingFee }}</el-descriptions-item>
        <el-descriptions-item label="合计金额">{{ orderDetail.totalAmount }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="请选择取消原因" :visible.sync="refuseDialogVisible" width="30%">
      <el-select v-model="cancelReason.reason" placeholder="请选择">
        <el-option v-for="(item, index) in reasonOptions" :key="index" :label="item" :value="item">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="cancelOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dashboard_data } from '@/api/dashboard'
import { page, take_order, ready_order, finish_order, order_detail, order_cancel } from '@/api/order'
export default {
  name: 'Dashboard',
  data() {
    return {
      dashboardData: {},
      queryParam: {
        status: 1
      },
      page: {
        page: 1,
        size: 1,
        total: 0
      },
      orderList: [],
      dialogFormVisible: false,
      refuseDialogVisible: false,
      orderDetail: {},
      cancelReason: {},
      reasonOptions: ['无法配送', '菜品已售罄', '其他']
    }
  },
  watch: {
    'queryParam.status'(newVal, oldVal) {
      this.page.page = 1
      this.initPage()
    }
  },
  computed: {
    ...mapGetters([
      'name',
      "shopId"
    ])
  },
  methods: {
    init() {
      dashboard_data().then(res => {
        this.dashboardData = res.data
      })
      this.initPage()
    },
    pageChange(page) {
      this.page.page = page
      this.initPage()
    },
    sizeChange(size) {
      this.page.size = size
      this.initPage()
    },
    initPage() {
      page({ ...this.page, ...this.queryParam, shopId: this.shopId }).then(res => {
        this.orderList = res.data.list
        this.page.total = res.data.total
      })
    },
    dishFormatter(row, column, cellValue, index) {
      let dishNames = ''
      row.orderItems.forEach(item => {
        dishNames += item.dishName + 'x' + item.quantity + ' '
      })
      return dishNames
    },
    takeOrder(id) {
      take_order(id).then(res => {
        this.$message.success('接单成功')
        this.init()
      })
    },
    readyOrder(id) {
      ready_order(id).then(res => {
        this.$message.success('开始派送')
        this.init()
      })
    },
    viewDetail(id) {
      order_detail(id).then(res => {
        this.orderDetail = res.data
        this.dialogFormVisible = true
      })
    },
    onCancelOrder(id) {
      this.cancelReason.orderId = id
      this.refuseDialogVisible = true
    },
    cancelOrder() {
      order_cancel(this.cancelReason).then(res => {
        this.$message.success('取消订单成功')
        this.init()
        this.refuseDialogVisible = false
        this.cancelReason = {}
      }).catch(err => {
        this.$message.error('取消订单失败')
      })
    },
    cancelDialog() {
      this.refuseDialogVisible = false
      this.cancelReason = {}
    },
    listenerOrder(message) {
      console.log('message', message)
      this.init()
    }
  },
  created() {
    this.init()
    this.$bus.$on("order_new", this.listenerOrder)
  },
  beforeDestroy() {
    this.$bus.$off("order_new")
  }
}
</script>

<style scoped>
.dashboard-status {
  display: flex;
  width: 100%;
}

.today-data {
  width: 95%;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}

.today-data>div:first-child {
  display: flex;
  justify-content: space-between;
}

.today-data>div:last-child {
  display: flex;
  justify-content: space-between;
}

.today-data-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 80px;
  border: 0.5px solid #ccc;
  padding: 10px;
}

.today-data-item>div:first-child {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.today-data-item>div:last-child {
  margin-bottom: 5px;
}

.order-dish {
  width: 95%;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #ccc;
}

.order-data,
.dish-data {
  width: 49%;
  display: flex;
  flex-direction: column;
  border: 0.3px solid #ccc;
}

.order-data>div:first-child,
.dish-data>div:first-child {
  display: flex;
  justify-content: space-between;
}

.order-dish-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.order-dish-item>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 0.5px solid #ccc;
}

.order-data .order-dish-item>div {
  width: 25%;
}

.dish-data .order-dish-item>div {
  width: 49%;
}
</style>
